@import '../variables.scss';
@import '../mixins.scss';

$callkit-prefix-cls: #{$cui-prefix}-callkit;

// MultiParty 完整布局样式
.#{$callkit-prefix-cls}-multi-party-full-layout {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  // background: url(../../../assets/callkit_bg.png) lightgray 0px 0px / 100% 100% no-repeat;
  background: #171A1C;
  // Header - 顶部固定
  .#{$callkit-prefix-cls}-header {
    height: $header-height;
    flex-shrink: 0;
    z-index: 10;
    // background: rgba(0, 0, 0, 0.8);
    // backdrop-filter: blur(10px);
    
    // Header内容样式
    .cui-header {
      background: transparent;
      border: none;
      .cui-header-content-text{
        color: $gray-98 !important;
      }
      .cui-header-content-sub{
        color: $gray-7;
      }
      .cui-header-title,
      .cui-header-subtitle {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      }
    }
  }

  // 内容区域 - 中间弹性
  .#{$callkit-prefix-cls}-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    min-height: 0; // 重要：确保 flex 子项可以缩小
    // padding: 0 34px;
  }

  // Controls - 底部固定
  .#{$callkit-prefix-cls}-controls {
    height: $controls-height;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    // background: rgba(0, 0, 0, 0.8);
    // backdrop-filter: blur(10px);
  }

  // 空状态
  .#{$callkit-prefix-cls}-empty {
    @include empty-state;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
  }

  // 最小化状态的控制区域
  .#{$callkit-prefix-cls}-minimized-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all $transition-fast;
    
    &:hover {
      background: rgba(0, 0, 0, 0.9);
    }
  }

  // 最小化状态的信息区域
  .#{$callkit-prefix-cls}-minimized-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
  }

  // 最小化状态的头像
  .#{$callkit-prefix-cls}-minimized-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
  }

  // 最小化状态的时间显示
  .#{$callkit-prefix-cls}-minimized-time {
    color: white;
    font-size: 12px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    margin-bottom: 4px;
  }

  // 最小化状态的人数显示
  .#{$callkit-prefix-cls}-minimized-count {
    color: rgba(255, 255, 255, 0.8);
    font-size: 10px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }

  // 最小化状态的快速控制按钮
  .#{$callkit-prefix-cls}-minimized-quick-controls {
    display: flex;
    gap: 8px;
    
    .cui-btn {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all $transition-fast;
      
      &:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.1);
      }
    }
  }

  // 全屏模式下的特殊样式
  &.#{$callkit-prefix-cls}-fullscreen {
    .#{$callkit-prefix-cls}-header,
    .#{$callkit-prefix-cls}-controls {
      background: rgba(0, 0, 0, 0.6);
    }
  }

  // 响应式适配
  @media (max-width: $breakpoint-mobile) {
    .#{$callkit-prefix-cls}-header {
      height: 50px;
      
      .cui-header {
        padding: 0 12px;
      }
    }
    
    .#{$callkit-prefix-cls}-controls {
      height: 50px;
      
      .cui-call-controls {
        gap: 12px;
        padding: 0 16px;
        
        .cui-call-controls-button {
          width: 40px;
          height: 40px;
        }
      }
    }
    
    .#{$callkit-prefix-cls}-minimized-avatar {
      width: 28px;
      height: 28px;
    }
    
    .#{$callkit-prefix-cls}-minimized-time {
      font-size: 11px;
    }
    
    .#{$callkit-prefix-cls}-minimized-count {
      font-size: 9px;
    }
  }
} 